{extend name="base"/}
{block name="resources"}
<style>
	#container{height: 500px; }
	.address-content {display: inline-block;vertical-align: top;}
	.important{color: red}
</style>
{/block}
{block name="main"}
<div class="layui-form ns-form" lay-filter="user">
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
		<div class="layui-input-inline">
			<span class="important">*以下信息十分重要，请务必认真填写（特别是发货地址和手机号），否则后果自负</span>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">供应商名称：</label>
		<div class="layui-input-inline">
			<input name="offer_name" value="{$edit_user_info.offer_name}" type="text" class="layui-input ns-len-long" autocomplete="off">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">营业执照号：</label>
		<div class="layui-input-inline">
			<input name="offer_business_license" value="{$edit_user_info.offer_business_license}" lay-verify="required" type="text" class="layui-input ns-len-long" autocomplete="off">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">联系人：</label>
		<div class="layui-input-inline">
			<input name="offer_person" value="{$edit_user_info.offer_person}" lay-verify="required" type="text" class="layui-input ns-len-long" autocomplete="off">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">手机号：</label>
		<div class="layui-input-inline">
			<input name="offer_mobile" value="{$edit_user_info.offer_mobile}" lay-verify="required" type="text" class="layui-input ns-len-long" autocomplete="off">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">发货地址</label>
		<div class="layui-input-inline area-select">
			<select name="province_id" lay-filter="province_id" lay-verify="province_id">
				<option value="">请选择省份</option>

			</select>
		</div>
		<div class="layui-input-inline area-select">
			<select name="city_id"  lay-filter="city_id" lay-verify="city_id">
				<option value="">请选择城市</option>
			</select>
		</div>
		<div class="layui-input-inline area-select">
			<select name="district_id"  lay-filter="district_id" lay-verify="district_id">
				<option value="">请选择区/县</option>
			</select>
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label"></label>
		<div class="layui-input-block">
			<input type="text" name="address" placeholder="请输入详细地址，以方便买家联系（请勿重复填写省市区）" lay-verify="address" autocomplete="off" class="layui-input ns-len-long address-content" value="{$edit_user_info.address}">
			<input type="hidden" name="longitude" lay-verify="required" class="layui-input" value="{$edit_user_info.longitude}"/>
			<input type="hidden" name="latitude" lay-verify="required" class="layui-input" value="{$edit_user_info.latitude}"/>
			<button class="layui-btn-primary layui-btn" onclick="refreshFrom();">查找地址</button>
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">地图定位：</label>
		<div class="layui-input-block ns-special-length">
			<div id="container" class="selffetch-map"></div>
		</div>
		<div class="ns-word-aux empty-address layui-hide">请选择地理位置！</div>
	</div>

	<!-- 表单操作 -->
	<div class="ns-form-row">
		<button class="layui-btn ns-bg-color" lay-submit lay-filter="save">保存</button>
		<button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
	</div>
	
	<!-- 隐藏域 -->
	<input value="{$edit_user_info.uid}" type="hidden" class="user_id" name="uid" />
</div>
{/block}
{block name="script"}
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.6&key=2df5711d4e2fd9ecd1622b5a53fc6b1d"></script>
<script type="text/javascript" src="SHOP_JS/address.js"></script>
<script type="text/javascript" src="STATIC_JS/map_address.js"></script>
<script>
	var form, repeat_flag, map_class, latlng;
	layui.use('form', function() {
		form = layui.form;
		repeat_flag = false;
		form.render();

		if('{$edit_user_info.latitude}' == "" || '{$edit_user_info.longitude}' == ""){
			latlng = {lat:'',lng:''};
		}else{
			latlng = {lat:'{$edit_user_info.latitude}',lng:'{$edit_user_info.longitude}'};
		}

		//初始化省级地址
		getAreaList(0, 1);

		//初始化联系地址
		var initdata = {province_id : '{$edit_user_info.province_id}', city_id : '{$edit_user_info.city_id}', district_id : '{$edit_user_info.district_id}'};
		initAddress(initdata, "user");

		//地图展示
		map_class = new mapClass("container", latlng);
		form.render();
		
		form.on('submit(save)', function(data) {

			if( data.field.longitude == "" || data.field.latitude == ""){
				layer.msg('请确认地理位置!');
				$(".empty-address").removeClass("layui-hide");
				return;
			}else{
				$(".empty-address").addClass("layui-hide");
			}

			var province_name = $("select[name=province_id] option:selected").text();
			var city_name = $("select[name=city_id] option:selected").text();
			var district_name = $("select[name=district_id] option:selected").text();

			data.field.full_address = province_name + city_name + district_name + data.field.address;

			if (repeat_flag) return;
			repeat_flag = true;

			$.ajax({
				dataType: 'JSON',
				type: 'POST',
				url: ns.url("shop/user/offer_setting"),
				data: data.field,
				success: function(res) {
					repeat_flag = false;
					if (res.code == 0) {
						layer.confirm('编辑成功', {
							title:'操作提示',
							btn: ['返回列表', '继续操作'],
							yes: function(){
								location.href = ns.url("shop/user/offer_setting")
							},
							btn2: function() {
								location.reload();
							}
						})
					}else{
						layer.msg(res.message);
					}
				}
			});
		});
		
		/**
		 * 表单验证
		 */
		form.verify({
			province_id : function(value, item){
				if(value == ''){
					return '请选择省份';
				}
			},
			city_id : function(value, item){
				if(value == ''){
					return '请选择城市';
				}
			},
			district_id : function(value, item){
				if(value == ''){
					return '请选择区/县';
				}
			},
			address: function(value) {
				if (value == '') {
					return '请输入详细地址';
				}
			},
		});
		form.render();
	});

	/**
	 * 重新渲染表单
	 */
	function refreshFrom(){
		form.render();
		orderAddressChange();//改变地址
		map_class.mapChange();
	}

	//动态改变订单地址赋值
	function orderAddressChange(){
		map_class.address.province = $("select[name=province_id]").val();
		map_class.address.province_name = $("select[name=province_id] option:selected").text();
		map_class.address.city = $("select[name=city_id]").val();
		map_class.address.city_name = $("select[name=city_id] option:selected").text();
		map_class.address.district = $("select[name=district_id]").val();
		map_class.address.district_name = $("select[name=district_id] option:selected").text();
		map_class.address.township = $("select[name=community_id]").val();
		map_class.address.township_name = $("select[name=community_id] option:selected").text();
		map_class.address.detail_address = $("input[name=address]").val()
	}

	/**
	 * 地址下拉框（主要用于坐标记录）
	 */
	function selectCallBack(){
		$("input[name=longitude]").val(map_class.address.longitude);//坐标
		$("input[name=latitude]").val(map_class.address.latitude);//坐标
	}

	//地图点击回调事件
	function mapChangeCallBack(){
		$("input[name=address]").val(map_class.address.address);//详细地址
		$("input[name=longitude]").val(map_class.address.longitude);//坐标
		$("input[name=latitude]").val(map_class.address.latitude);//坐标

		$.ajax({
			type : "POST",
			dataType: 'JSON',
			url : ns.url("shop/address/getGeographicId"),
			async : true,
			data : {
				"address" : map_class.address.area
			},
			success : function(data) {
				map_class.address.province = data.province_id;
				map_class.address.city = data.city_id;
				map_class.address.district = data.district_id;
				map_class.address.township = data.subdistrict_id;
				map_class.map_change = false;
				form.val("storeform", {
					"province_id": data.province_id
				});
				$("select[name=province_id]").change();
				form.val("storeform", {
					"city_id": data.city_id
				});
				$("select[name=city_id]").change();
				form.val("storeform", {
					"district_id": data.district_id
				});
				$("select[name=district_id]").change();
				form.val("storeform", {
					"community_id": data.subdistrict_id
				});
				refreshFrom();//重新渲染form
				map_class.map_change = true;
			}
		});
	}
	
	function back() {
		location.href = ns.url("shop/user/offer_setting");
	}
</script>
{/block}
